<template>
  <div>
    <el-card v-if="optionsM==0">
        <el-table
          :data="studentData"
          style="width: 100%">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="code" label="学号" width="110"></el-table-column>
          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
          <el-table-column prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column prop="birthday" label="生日" width="180"></el-table-column>
          <el-table-column prop="phone" label="电话" width="180"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
          <el-table-column prop="password" label="密码" width="180"></el-table-column>
          <el-table-column prop="department" label="部门" width="180"></el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle @click="editStudent()"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteStudent(scope.row.code)"></el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-card>
    <el-card v-else>
        <el-table
          :data="teacherData"
          style="width: 100%">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="code" label="学号" width="110"></el-table-column>
          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
          <el-table-column prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column prop="phone" label="电话" width="180"></el-table-column>
          <el-table-column prop="password" label="密码" width="180"></el-table-column>
          <el-table-column prop="department" label="部门" width="180"></el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle @click="editTeacher()"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteTeacher(scope.row.code)"></el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-card>
    <div v-show="isShow">
      <el-card v-if="optionsM==0" style="text-align:center">
        ID：<el-input v-model="id" placeholder="请输入Code"></el-input>
        <p></p>
        Code：<el-input v-model="code" placeholder="请输入Code"></el-input>
        <p></p>
        Name：<el-input v-model="name" placeholder="请输入Name"></el-input>
        <p></p>
        Sex：<el-input v-model="sex" placeholder="请输入sex"></el-input>
        <p></p>
        Birthday：<el-date-picker v-model="birthday" type="date" placeholder="选择日期"></el-date-picker>
        <p></p>
        Email：<el-input v-model="email" placeholder="请输入Email"></el-input>
        <p></p>
        Phone：<el-input v-model="phone" placeholder="请输入Phone"></el-input>
        <p></p>
        Password：<el-input v-model="password" placeholder="请输入Password" type="password"></el-input>
        <p></p>
        Department：<el-input v-model="department" placeholder="请输入Department"></el-input>
        <p></p>
        <el-button type="primary" @click.native="updateS()">更新</el-button>
        <el-button  @click.native="updateBack()">返回</el-button>
      </el-card>
      <el-card v-else style="text-align:center">
        ID：<el-input v-model="id" placeholder="请输入Code"></el-input>
        <p></p>
        Code：<el-input v-model="code" placeholder="请输入Code"></el-input>
        <p></p>
        Name：<el-input v-model="name" placeholder="请输入Name"></el-input>
        <p></p>
        Sex：<el-input v-model="sex" placeholder="请输入sex"></el-input>
        <p></p>
        Phone：<el-input v-model="phone" placeholder="请输入Phone"></el-input>
        <p></p>
        Password：<el-input v-model="password" placeholder="请输入Password" type="password"></el-input>
        <p></p>
        Department：<el-input v-model="department" placeholder="请输入Department"></el-input>
        <p></p>
        <el-button type="primary" @click.native="updateT()">更新</el-button>
        <el-button  @click.native="updateBack()">返回</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  props: ['name','code','optionsM'],
  components: {
  },
  data() {
    return {
      studentData:[],
      teacherData:[],
      id:'',
      sex:'',
      birthday:'',
      email:'',
      phone:'',
      password:'',
      department:'',
      isShow:false,
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    deleteStudent(code){
      console.log(code)
      this.axios.get(`/SCS/student/deleteStudent?code=${code}`,{
      }).then(
        response=>{
          this.$alert(`${response.data},请重新登录`, '提示', {
              confirmButtonText: '确定',
          });
          this.getStudentData()
        },
        error=>{
          console.log(error)
        }
      )
    },
    deleteTeacher(code){
      console.log(code)
      this.axios.get(`/SCS/teacher/deleteTeacher?code=${code}`,{
      }).then(
        response=>{
          this.$alert(`${response.data},请重新登录`, '提示', {
              confirmButtonText: '确定',
          });
          this.getTeacherData()
        },
        error=>{
          console.log(error)
        }
      )
    },
    getStudentData(){
      
      this.axios.get(`/SCS/student/selectCode?code=${this.code}`).then(
          response=>{
            console.log(response.data)
            console.log(this.studentData)
            this.studentData=response.data
          },
          error=>{
            console.log(error.msg)
          }
        )
    },
    getTeacherData(){
       this.axios.get(`/SCS/teacher/selectTeacherCode?code=${this.code}`).then(
        response=>{
        console.log(response.data)
        console.log(this.studentData)
        this.teacherData=response.data
      },
      error=>{
        console.log(error.msg)
      }
    )
    },
    updateS(){

        this.axios.get(`/SCS/student/updateStudent?id=${this.id}&code=${this.code}&name=${this.name}&sex=${this.sex}&birthday=${this.birthday}&email=${this.email}&phone=${this.phone}&password=${this.password}&department=${this.department}`
        ).then(
            response=>{
                console.log('1',response)
                this.$alert(`${response.data}`, '提示', {
                    confirmButtonText: '确定',
                })
                this.isShow=false
                this.getStudentData()
            },
            error=>{
                console.log('0',error)
            }
        )      
    },
    updateT(){
      this.axios.get(`/SCS/teacher/updateTeacher?id=${this.id}&code=${this.code}&name=${this.name}&sex=${this.sex}&phone=${this.phone}&password=${this.password}&department=${this.department}`
        ).then(
            response=>{
                console.log('1',response)
                this.$alert(`${response.data}`, '提示', {
                    confirmButtonText: '确定',
                })
                this.isShow=false
                this.getTeacherData()
            },
            error=>{
                console.log('0',error)
            }
        )
    },
    updateBack(){
      this.isShow=false
    },
    editTeacher(){
      this.isShow=true
    },
    editStudent(){
      this.isShow=true
    }
  },
  mounted(){
      this.getStudentData()
      this.getTeacherData()
  }
};
</script>
<style scoped lang="less">
  .el-card{
    text-align: center;
  }
  .el-input{
      width: 300px;
  }
</style>